<template>
  <div class="usercard">
    <div class="signup-pic"></div>

    <input placeholder="邮箱" v-model="findFrom.email" />

    <div class="auth">
      <input placeholder="验证码" v-model="findFrom.code" />
      <el-button style="" color="#ff7d00" @click="sendCode"
        ><span style="color: white">获取验证码</span></el-button
      >
    </div>

    <el-button style="margin-top: 10px" color="#ff7d00" @click="sendForget()"
      ><span style="color: white">确认</span></el-button
    >
    <div class="gologin" id="gologin" @click="changesignup">立即登录</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { userinfo } from '@/stores/counter';
import usesignup from '@/api/getSignup';
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import findForget from '@/api/findForget';
const { codeAuth } = usesignup();
const { forget } = findForget();

const user = userinfo();

let isAvatorUploaded = ref(false);
const fileInput = ref(null);
const findFrom = reactive({
  email: '',
  code: '',
});
function sendCode() {
  if (!findFrom.email) {
    ElMessage({
      showClose: true,
      message: '请输入验证邮箱！',
      type: 'error',
    });
  } else {
    codeAuth(findFrom.email, '忘记密码');
  }
}

function sendForget() {
  if (!findFrom.email || !findFrom.code) {
    ElMessage({
      showClose: true,
      message: '字段不能为空！',
      type: 'error',
    });
  } else {
    forget(findFrom.email, findFrom.code);
  }
}

function changesignup() {
  user.usercardPage = 0;
}
</script>

<style scoped>
.usercard {
  width: 460px;
  height: fit-content;
  background-color: white;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  border-radius: 10px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.signup-pic {
  background-image: url(/assets/imgs/signup.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 70px;
  width: 160px;
  margin: 50px 0 20px;
}

.avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #cdcdcd;
  cursor: pointer;
}

.avatar-border {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 3px #cdcdcd solid;
}

.usercard > input {
  display: flex;
  width: calc(70%);
  margin: 10px;
  padding: 5px 10px;
  height: 40px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.usercard > input::placeholder {
  color: #bfbdbe;
}

.usercard > input:focus {
  outline: none;
  /* 可选，去除选中时的默认外边框 */
}

.gologin {
  color: #c6c0c0;
  margin: 20px 0 40px;
  text-decoration: underline;
  cursor: pointer;
}

.auth {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.auth > input,
.auth > el-button {
  /* 共享样式 */
  display: flex;
  width: calc(70%);
  margin: 10px;
  padding: 5px 10px;
  height: 40px;
  border: 1px #bfbdbe solid;
  border-radius: 5px;
  font-size: 18px;
}

.auth > input::placeholder {
  color: #bfbdbe;
}

.auth > input:focus {
  outline: none;
}

.auth > el-button {
  /* 按钮样式 */
}
</style>
